<template>
  <view class="created">
    <nav-bar title="隐患处理" leftArrow></nav-bar>
    <view class="created-header">隐患上报</view>
    <van-form class="created-form" @submit="onSubmit" :readonly="loading" label-width="140rpx" colon>
      <van-cell-group inset>
        <van-field
          v-model="form.projectName"
          is-link readonly  required
          name="picker"
          label="工程"
          placeholder="请选择工程"
          @click="selectShow.project = true"
          :rules="[{ required: true, message: '请选择工程' }]"
        />
        <van-field
          v-model="form.source.text"
          is-link readonly required
          name="picker"
          label="隐患来源"
          placeholder="请选择隐患来源"
          @click="selectShow.source = true"
          :rules="[{ required: true, message: '请选择隐患来源' }]"
        />
        <van-field
          name="checked" label="关联设备"
          placeholder="请选择关联设备"
          :rules="[{ required: false, message: '请选择关联设备' }]"
        >
          <template #input>
            <picker-multiple :columns="devicesList" @confirm="onDeviceConfirm"></picker-multiple>
          </template>
        </van-field>
        <van-field
          v-model="form.managerName"
          is-link readonly required
          name="picker"
          label="接收人"
          placeholder="请选择接收人"
          @click="selectShow.user = true"
          :rules="[{ required: true, message: '请选择接收人' }]"
        />
        <van-field
          v-model="form.discoverTime"
          is-link readonly required
          name="datePicker"
          label="发现时间"
          placeholder="请选择时间"
          @click="selectShow.calendar = true"
          :rules="[{ required: true, message: '请选择隐患来源' }]"
        />
        <van-field
          name="uploader" label="隐患照片" required
          :rules="[{ required: true, message: '请上传隐患照片' }]"
        >
          <template #input>
            <upload-file accept="image/*" v-model="form.picUrl" ></upload-file>
          </template>
        </van-field>
        <van-field
          name="uploader" label="隐患视频"
          :rules="[{ required: false, message: '请上传隐患视频' }]"
        >
          <template #input>
            <upload-file accept="video/*" v-model="form.patrolVideoId"></upload-file>
          </template>
        </van-field>
        <van-field
          v-model="form.desc"
          rows="4" autosize type="textarea"
          label="隐患描述"
          placeholder="请输入隐患描述"
        />
      </van-cell-group>
      <view class="created-footer">
        <van-button class="created-button-cancel" type="default" native-type="submit">返回</van-button>
        <van-button 
          class="created-button-submit" type="primary" native-type="submit"
          :loading="loading" loading-text="上报中..."
        >上报</van-button>
      </view>
    </van-form>

    <!-- 选择器 工程 -->
    <picker-search
      v-model:show="selectShow.project"
      :columns="projectItemsList"
      @confirm="onProjectConfirm"
      @cancel="selectShow.project = false"
    ></picker-search>

    <!-- 选择器 隐患来源 -->
    <van-popup v-model:show="selectShow.source" destroy-on-close position="bottom">
      <van-picker
        :columns="sourcesList"
        @confirm="onSourceConfirm"
        @cancel="selectShow.source = false"></van-picker>
    </van-popup>

    <!-- 选择器 接收人 -->
    <picker-search
      v-model:show="selectShow.user"
      :columns="usersList"
      @confirm="onUserConfirm"
      @cancel="selectShow.user = false"
    ></picker-search>

    <!-- 日历 -->
    <picker-date-time
      v-model:show="selectShow.calendar" 
      @confirm="onCalendarConfirm" 
    ></picker-date-time>
  </view>
</template>

<script setup>
import dayjs from 'dayjs'
import { ref } from 'vue';
import store from '@/store'
import { apiHiddenTrobleSave } from '@/api/hiddenTroble';
import { apiProjectItemsList, apiTypesList, apiDevicesList, apiUsersList } from '@/api/common';
const userInfo = store.getters.GET_USER_INFO.sysUser;
let form = ref({
  'projectId': null,
  'source': {},
  'discoverer': null,
  'discoverTime': '',
  'manager': null,
  'managerName': '',
  'desc': '',
  'relatedEquipment': [],
  'picUrl': [],
  'patrolVideoId': [],
});
const selectShow = ref({
  project: false,
  source: false,
  equipment: false,
  discoverTime: false,
  calendar: false,
  user: false,
});
const loading = ref(false);
let projectItemsList = ref([]);
let sourcesList = ref([]);
let devicesList = ref([]);
let usersList = ref([]);

const onSubmit = (values) => {
  loading.value = true;
  const param = {
    ...form.value,
    source: form.value.source.value,
    discoverer: Number(userInfo.userId),
    discovererName: userInfo.name,
  }
  apiHiddenTrobleSave(param).then(res => {
    loading.value = false;
    uni.redirectTo({ url: '/pages/hiddenTroble/index' });
  })
};

// 选择器 工程
const onProjectConfirm = ({selectedValues, selectedOptions}) => {

  form.value.projectId = selectedValues[0];
  form.value.projectName = selectedOptions[0]?.text;
  selectShow.value.project = false;
  // 获取设备
  getDevicesList({
    projectItemId: selectedValues[0]
  });
}
// 选择器 隐患来源
const onSourceConfirm = ({selectedValues, selectedOptions,}) => {
  selectShow.value.source = false
  form.value.source = selectedOptions[0];
}

// 选择器 接收人
const onUserConfirm = ({selectedValues, selectedOptions}) => {
  form.value.manager = selectedOptions[0].value;
  form.value.managerName = selectedOptions[0].text;
  selectShow.value.user = false;
}
// 选择器 日历
const onCalendarConfirm = (value) => {
  form.value.discoverTime = value;
  selectShow.value.calendar = false;
}

// 选择器 设备
const onDeviceConfirm = (list) => {
  console.log('onDeviceConfirm', list);
  form.value.relatedEquipment = list.map(e => ({
    id: e.value,
    name: e.name,
  }));
}

// 获取数据 工程
const getProjectItemsList = () => {
  apiProjectItemsList().then(res => {
    projectItemsList.value = res.map(n => ({
      text: n.name,
      value: n.projectItemId
    }));
  })
}
// 获取数据 隐患来源
const getSourceConfirm = () => {
  apiTypesList({
    value: 'troubleSourceEnum'
  }).then(res => {
    sourcesList.value = res.map(n => ({
      text: n.label,
      value: n.value
    }));
  })
}
// 获取数据 设备
const getDevicesList = (param) => {
  devicesList.value = [];
  form.value.relatedEquipment = [];

  if (!form.value.projectId) {
    return;
  }

  apiDevicesList({
    projectItemId: form.value.projectId
  }).then(res => {
    devicesList.value = res.map(n => ({
      name: n.deviceName,
      value: n.deviceItemId,
      text: `${n.deviceName}-${n.sensorNo || ''}`,
    }));
  })
}
// 获取数据 人员
const getUsersList = () => {
  apiUsersList({
    pageNumber: 1,
    pageSize: 10000,
  }).then(res => {
    usersList.value = res.records.map(n => ({
      text: n.name,
      value: n.userId
    }));
  })
}
getProjectItemsList();
getSourceConfirm();
getUsersList();
</script>

<style lang="scss" scoped>
.created {
  &-header {
    height: 100rpx;
    line-height: 100rpx;
    text-indent: 30rpx;
    color: #333;
  }
  &-form {
    padding-bottom: 20rpx;
  }
  &-footer {
    margin-top: 30rpx;
    padding: 0 30rpx;
    display: flex;
    gap: 30rpx;
  }
  &-button {
    &-submit {
      flex: 1;
    }
    &-cancel {
      width: 140rpx;
    }
  }
}
</style>